<template>
    <el-dialog v-model="visible" title="新闻详情" width="80%" align-center :show-close="false" :close-on-click-modal="false">
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">新闻详情</h4>
                <el-button @click="goback">返回</el-button>
            </div>
        </template>
        <div class="content" v-loading="loading">
            <h2 class="title">{{ info.title }}</h2>
            <div class="user">
                <img class="image" :src="`/src/assets/images/user/${info.userImage}.webp`" />
                <div class="info">
                    <div class="nickname">{{ info.nickname }}</div>
                    <div class="time">{{ info.createTime }}</div>
                </div>
            </div>
            <div class="info-content" ref="content"></div>
            <div class="like">

                <span class="iconfont" @click="dianzan(info)"
                    :class="user.userlike.artIds.includes(info.id) ? 'icon-dianzan_kuai' : 'icon-dianzan'"></span>
                <span class="num">({{ info.likes }})</span>
            </div>
            <div class="comment">
                <div class="head">全部回复</div>
                <div class="comment-list">
                    <div class="comment-item" v-for=" item  in  commentList " :key="item.id">
                        <div class="item-top">
                            <div class="user">
                                <img class="image" :src="`/src/assets/images/user/${item.image}.webp`">
                                <span class="nickname">{{ item.nickname }}</span>
                            </div>
                            <div class="like">
                                <span class="iconfont" @click="userdianzan(item)"
                                    :class="user.userlike.artcomIds.includes(item.id) ? 'icon-dianzan_kuai' : ' icon-dianzan'"></span>
                                <span class="num">({{ item.likes }})</span>
                            </div>
                        </div>
                        <div class="item-content">{{ item.content }}
                        </div>
                        <div class="item-time">{{ item.createTime }}</div>
                    </div>
                </div>
                <PagingVue :totalPages="pageInfo.totalPage" :pagingMethod="getComment" v-if="pageInfo.total > 10" />
                <el-empty description="暂无回复" v-if="!commentList.length && !loading" />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-input v-model="comment" placeholder="回复千百度，文明第一步" maxlength="255" />
                <el-button @click="publish" :loading="loading" :disabled="!comment.length">发送</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch, nextTick } from "vue";
import { ElMessage, linkEmits } from 'element-plus'
import checkToken from "@/utils/token";
import { getComPage, addComment, like, removelike, userlike } from '@/api/article'
import PagingVue from "@/components/Paging.vue";
import { useUserStore } from "@/store";


const props = defineProps({
    info: {
        type: Object,
        default: {}
    }
})
const user: any = useUserStore()
const visible = ref(false)
const loading = ref(false)
const content: any = ref(null)

const emitShow = () => {
    visible.value = true;
    nextTick(() => {
        content.value.innerHTML = props.info.content
        const dom = document.querySelector('.content');
        dom?.scrollTo({ top: 0 })
    })
}
// 传递给父组件的方法
defineExpose({ emitShow })
const goback = () => {
    visible.value = false
    comment.value = '';
}
const comment = ref('')
const commentList: any = ref([])
const pageInfo = reactive({
    page: 1,
    limit: 10,
    total: 0,
    totalPage: 0
})

// }

// 点赞
const dianzan = (item: any) => {
    const params = {
        type: 'art',
        id: item.id
    }
    const shuzu = user.userlike.artIds;
    console.log(shuzu);
    console.log(props.info.id);
    if (shuzu.includes(props.info.id)) {
        removelike(params).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.msg)
            ElMessage.success(res.msg)
            shuzu.pop(props.info.id)
            // console.log(shuzu);
            item.likes--
        }).finally(() => {
        })
    } else {
        like(params).then((res: any) => {
            ElMessage.success('点赞成功')
            shuzu.push(props.info.id)
            item.likes++
        }).finally(() => {
        })

    }
}
// 用户点赞
const userdianzan = (item: any) => {
    const params = {
        type: 'artcom',
        id: item.id
    }
    const shuzu = user.userlike.artcomIds
    if (shuzu.includes(item.id)) {
        removelike(params).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.msg)
            ElMessage.success(res.msg)
            shuzu.pop(item.id)
            item.likes--
        }).finally(() => {
        })
    } else {
        like(params).then((res: any) => {
            ElMessage.success('点赞成功')
            shuzu.push(item.id)
            item.likes++
        }).finally(() => {
        })

    }
}
// 获取帖子评论
const getComment = (page?: number) => {
    if (page) pageInfo.page = page
    const params = {
        newsId: props.info.id,
        page: pageInfo.page,
        limit: pageInfo.limit,
    }
    getComPage(params).then((res: any) => {
        if (res.code !== 200) return ElMessage.error(res.message || '获取评论列表失败')
        const { data } = res;
        pageInfo.totalPage = data.totalPage;
        pageInfo.total = data.total;
        commentList.value = data.data;
    })
}

watch(() => props.info, (newVal, oldVal) => {
    if (!newVal?.id) return;
    getComment();
}, { deep: true })

// 发送评论
const publish = () => {
    // 先判断是否有权限
    checkToken(() => {
        loading.value = true;
        addComment({ content: comment.value, newsId: props.info.id }).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.message || '添加评论失败')
            ElMessage.success(res.msg || '发表成功')
            comment.value = '';
            getComment();
        }).finally(() => loading.value = false)
    })
}
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    padding: 0 30px;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.content {
    padding: 0px 30px;
    max-height: 700px;
    overflow-y: auto;
}

.user {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    }

    .info {
        margin-left: 20px;
        display: flex;
        align-items: center;

        .nickname {
            color: #333;
            font-size: 20px;
            margin-right: 20px;
        }

        .time {
            color: #ccc;
            font-size: 14px;
        }
    }
}

.title {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000;
    font-size: 30px;
    text-align: center;
}

.outline {
    padding: 0;
    color: #000;
}

.dianzan {
    // background-color: pink;
    // color: pink;
}

.like {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover .iconfont {
        color: #000;
    }

    .iconfont {
        font-size: 30px;

        &.icon-dianzan_kuai {
            color: pink;
        }
    }
}

.comment {
    margin-top: 30px;
    color: #000;

    .comment-item {
        padding: 0 20px;
        margin: 10px 0;

        .item-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;

            .user {
                .image {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;
                }

            }

            .like {
                font-size: 14px;

                .iconfont {
                    font-size: 24px;

                }
            }
        }

        .item-content {
            width: 100%;
            word-wrap: break-word;
        }

        .item-time {
            font-size: 16px;
            color: #ccc;
        }
    }
}
</style>